<template>
  <div style="padding: 30px">
    <a-table
      :data-source="page.data"
      bordered
      :loading="loading"
      :pagination="{
        pageSize: page.pageSize,
        current: page.pageNo,
        total: page.totals,
      }"
      @change="changeData"
    >
      <p slot="expandedRowRender" slot-scope="record" style="margin: 0">
        <a-descriptions title="" layout="vertical" :column="1">
          <a-descriptions-item label="ABI">
            {{ record.abi }}
          </a-descriptions-item>
          <a-descriptions-item label="BINARY">
            <div style="max-width: 100%; word-break: break-all">
              {{ record.binary }}
            </div>
          </a-descriptions-item>
        </a-descriptions>
      </p>
      <a-table-column
        key="contractName"
        data-index="contractName"
        title="合约名称"
        width="100"
        align="center"
        ellipsis
      >
        <template slot-scope="text, record">
          <span>
            {{ record.contractName }}
          </span>
        </template>
      </a-table-column>
      <a-table-column
        key="address"
        data-index="address"
        title="合约地址"
        width="100"
        align="center"
        ellipsis
      >
        <template slot-scope="text, record">
          <span>
            {{ record.address }}
            <a-icon type="copy" @click="copy(record.address)"/>
          </span>
        </template>
      </a-table-column>
      <a-table-column
        key="txHash"
        data-index="txHash"
        title="交易HASH"
        width="100"
        align="center"
        ellipsis
      >
        <template slot-scope="text, record">
          <span>
            <router-link
              :to="{ name: 'Block', query: { hash: record.txHash } }">
              {{ record.txHash }}
            </router-link>

            <!-- <a @click="toBlock(record.hash)">{{ record.hash }}</a> -->
          </span>
        </template>
      </a-table-column>
      <a-table-column
        key="createTime"
        data-index="createTime"
        title="生成时间"
        width="100"
        align="center"
        ellipsis
      >
        <template slot-scope="text, record">
          <span>
            {{ record.createTime }}
          </span>
        </template>
      </a-table-column>
    </a-table>
  </div>
</template>
<script>
import Constant from "../utils/Constant";
export default {
  data() {
    return {
      loading: false,
      page: {
        pageNo: 1,
        pageSize: 10,
        pages: 0,
        totals: 0,
        data: [],
      },
    };
  },
  created() {
    this.getContracts(1);
  },
  methods: {
    getContracts(pageNo) {
      let url = Constant.CONTRACT_INFOS_URL + pageNo;
      url += "?pageSize=" + this.page.pageSize;
      this.loading = true;
      this.$http.get(url).then(
        (resp) => {
          // console.log(resp);
          if (resp.data.code === "01") {
            this.page.data = resp.data.result.content;
            this.page.pageNo = resp.data.result.pageable.pageNumber + 1;
            this.page.pageSize = resp.data.result.pageable.pageSize;
            this.page.pages = resp.data.result.totalPages;
            this.page.totals = resp.data.result.totalElements;

          } else {
            this.$message.error(resp.data.message);
          }
          this.loading = false;
        },
        (err) => {
          console.log(err);
          this.loading = false;
        }
      );
    },
    changeData(data) {
      console.log(data);
      this.getContracts(data.current);
    },
    toBlock(txHash) {
      console.log(txHash);
      this.$router.push({
        name: "Block",
        params: {
          hash: txHash,
        },
      });
    },
    copy(data) {
      console.log("copy", data)
      Constant.copyToClipboard(data, () => {
         this.$message.success(data + " Copied!")
      });
    },
  },
};
</script>
